{% extends "base_generic.html" %}

{% block content %}
  <div class="jumbotron" style="background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
    <h1 style="text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">📚 Local Library Home</h1>
    <p class="lead" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>! 🌟</p>
  </div>

  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-primary" style="border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3); transform: translateY(0); transition: all 0.3s ease;">
        <div class="panel-heading" style="background: linear-gradient(45deg, #3498db, #2980b9); border-radius: 15px 15px 0 0;">
          <h3 class="panel-title" style="color: white;">📚 Books</h3>
        </div>
        <div class="panel-body" style="background: rgba(52, 152, 219, 0.05); border-radius: 0 0 15px 15px;">
          <p>The library has <strong style="color: #3498db;">{{ num_books }}</strong> books.</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="panel panel-success" style="border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3); transform: translateY(0); transition: all 0.3s ease;">
        <div class="panel-heading" style="background: linear-gradient(45deg, #2ecc71, #27ae60); border-radius: 15px 15px 0 0;">
          <h3 class="panel-title" style="color: white;">📄 Copies</h3>
        </div>
        <div class="panel-body" style="background: rgba(46, 204, 113, 0.05); border-radius: 0 0 15px 15px;">
          <p>The library has <strong style="color: #2ecc71;">{{ num_instances }}</strong> copies.</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="panel panel-info" style="border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(26, 188, 156, 0.3); transform: translateY(0); transition: all 0.3s ease;">
        <div class="panel-heading" style="background: linear-gradient(45deg, #1abc9c, #16a085); border-radius: 15px 15px 0 0;">
          <h3 class="panel-title" style="color: white;">✅ Available</h3>
        </div>
        <div class="panel-body" style="background: rgba(26, 188, 156, 0.05); border-radius: 0 0 15px 15px;">
          <p><strong style="color: #1abc9c;">{{ num_instances_available }}</strong> copies available.</p>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="panel panel-warning" style="border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(243, 156, 18, 0.3); transform: translateY(0); transition: all 0.3s ease;">
        <div class="panel-heading" style="background: linear-gradient(45deg, #f39c12, #e67e22); border-radius: 15px 15px 0 0;">
          <h3 class="panel-title" style="color: white;">✍️ Authors</h3>
        </div>
        <div class="panel-body" style="background: rgba(243, 156, 18, 0.05); border-radius: 0 0 15px 15px;">
          <p>The library has <strong style="color: #f39c12;">{{ num_authors }}</strong> authors.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert-info" role="alert" style="background: linear-gradient(45deg, #74b9ff, #0984e3); color: white; border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(116, 185, 255, 0.3); margin-top: 30px;">
    <p style="margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">🎯 You have visited this page <strong>{{ num_visits }}</strong> time{{ num_visits|pluralize }}.</p>
  </div>

  <style>
    .panel:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
    }
  </style>

{% endblock %} 